<template>
	<el-main>
		<el-row>
			<el-button type="primary" size="medium" icon="el-icon-edit" @click="openDrawer">
				新增成员
			</el-button>
			<div class="hidden-md-and-down" style="float: right;clear: both;">
				<el-tag>正在为【{{$route.query.groupName}}】分配用户</el-tag>
			</div>
		</el-row>
		<el-table :data="tableData" border style="margin-top: 10px;">
			<el-table-column
				label="序号"
				width="100">
				<template slot-scope="scope">
					{{scope.$index+1}}
				</template>
			</el-table-column>
			<el-table-column
				prop="username"
				label="用户名">
			</el-table-column>
			<el-table-column
				prop="realName"
				label="姓名">
			</el-table-column>
			<el-table-column
				prop="createTime"
				label="创建时间">
			</el-table-column>
			<el-table-column label="操作" width="101">
				<template slot-scope="scope">
					<el-button type="danger" size="small" 
						@click="deleteUserGroup(scope.row.id,scope.$index)">
						移除用户
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page-block" v-if="params.totalCount > 0">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-size="params.pageSize"
				:current-page.sync="params.currentPage"
				layout="total, prev, pager, next, jumper"
				:total="params.totalCount">
			</el-pagination>
		</div>
		<!-- 抽屉 -->
		<el-drawer
			title="分配用户"
			:visible.sync="drawer"
			direction="rtl"
			size="35%"
			:before-close="closeDrawer">
			<div style="padding: 20px;">
				<el-alert
					title='请把需要加入到该群组的成员通过"加入群组"按钮分配过去'
					type="success">
				</el-alert>
				<el-table 
					:data="drawerBox.tableData" 
					v-el-table-infinite-scroll="load" 
					border style="margin-top: 10px;">
					<el-table-column
						prop="username"
						label="用户名">
					</el-table-column>
					<el-table-column
						prop="realName"
						label="真实姓名">
					</el-table-column>
					<el-table-column label="操作" width="101">
						<template slot-scope="scope">
							<el-button type="success" size="small" :disabled="scope.row.btnVisible"
								@click="addUserGroup(scope.row.userId,scope.$index)">
								加入群组
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-drawer>
	</el-main>
</template>

<script>
	import elTableInfiniteScroll from 'el-table-infinite-scroll'
	import { getUserList,getUserListFromGroup,deleteUserGroup,addUserGroup } from '@/api/group.js'
	export default {
		directives: {
			'el-table-infinite-scroll': elTableInfiniteScroll
		},
		data() {
			return {
				tableData: [],
				params: {
					// 当前页
					currentPage: 1,
					// 每页多少条
					pageSize: 10,
					// 统计总数
					totalCount: 0
				},
				drawer: false,
				drawerBox: {
					tableData: [],
					params: {
						// 当前页
						currentPage: 1,
						// 每页多少条
						pageSize: 10,
						// 统计总数
						totalCount: 0
					}
				}
			}
		},
		mounted() {
			if (this.$route.query.groupId) {
				this.params.group_id = this.$route.query.groupId;
				this.getUserListFromGroup();
			}
		},
		methods: {
			// 使用该群组的用户列表
			getUserListFromGroup() {
				let _this = this;
				getUserListFromGroup(_this.params).then(function(res){
					if (res.code === 200) {
						_this.tableData = res.data.records;
						_this.params.totalCount = res.data.total;
					} else {
						_this.$message.error(res.msg);
					}
				})
			},
			// 每页多少条
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.getUserListFromGroup();
			},
			// 当前页
			handleCurrentChange(val) {
				this.params.currentPage = val;
				this.getUserListFromGroup();
			},
			// 删除用户群组
			deleteUserGroup(id,index) {
				this.$confirm('此操作将从群组移除该用户，是否继续？',
				'提示', {type: 'warning'}).then(() => {
					let _this = this;
					deleteUserGroup({'id': id}).then(function(res){
						if (res.code === 200) {
							_this.tableData.splice(index, 1);
							_this.$message({
								message: res.msg,
								type: 'success'
							});
						} else {
							_this.$message.error(res.msg);
						}
					})
				}).catch(() => {});
			},
			// 打开抽屉
			openDrawer() {
				this.drawer = true;
			},
			// 关闭抽屉
			closeDrawer(done) {
				done();
			},
			// 加载数据
			load() {
				let _this = this;
				getUserList(_this.drawerBox.params).then(function(res){
					if (res.code === 200) {
						let data = res.data;
						data.forEach(item => {
							_this.$set(item,'btnVisible',false)
						})
						_this.drawerBox.tableData = _this.drawerBox.tableData.concat(data);
						_this.drawerBox.params.currentPage++;
					}
				})
			},
			// 加入群组
			addUserGroup(user_id,index) {
				let _this = this;
				addUserGroup({
					'user_id': user_id, 
					'group_id': _this.$route.query.groupId
				}).then(function(res){
					if (res.code === 200) {
						_this.tableData.push(_this.drawerBox.tableData[index]);
						_this.drawerBox.params.totalCount++;
						_this.drawerBox.tableData[index].btnVisible = true;
						_this.$message.success(res.msg);
					} else {
						_this.$message.error(res.msg);
					}
				})
			}
		}
	}
</script>

<style>
	/**
	 * 抽屉显示滚动条
	 */
	.el-drawer.rtl {
		overflow: scroll;
	}
</style>
